<template>
  <div class="loadmore-wrapper">
    <mt-loadmore @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :autoFill="autoFill" :topDistance="topDistance" :bottomDistance="bottomDistance" ref="loadmore">
      <ul>
        <li v-for="item in articles" class="Litem">
          <h2><a href="#">{{item.title}}</a></h2>
            <p class="intro">{{item.intro}}</p>
            <dl class="info">
                <dt><a href="#"><img :src="item.userPic" alt="用户头像"></a></dt>
                <dd class="userName"><a href="#">{{item.author}}</a></dd>
                <dd class="postDate">{{item.postD | datefmt}}</dd>
                <dd class="tag"><span>{{item.tag}}</span>(<em>{{item.type}}</em>)</dd>
                <dd class="readNum rfloat">
                    <i class="read"></i><span class="readN">{{item.readN}}</span>
                    <i class="tuijian"></i><span class="tuijianN">{{item.recommendN}}</span>
                </dd>
            </dl>
        </li>
      </ul>
    </mt-loadmore>
  </div>
</template>

<script>
import Vue from 'vue'
import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);
export default {
  name: 'index',
  data () {
    return {
      bottomStatus:'',
      articles:[],
      page:1,
      pageSize:6,
      maxPage:0,
      tag:'',
      title:'',
      author:'',
      autoFill:true,
      allLoaded: false,
      topDistance:50,
      bottomDistance:50,
      scrollMode:"auto",
      topMethod:this.loadTop
    }
  },
  created(){
    this.getArticles(this.page,this.pageSize,this.tag,this.title,this.author);
  },
  updated(){
    this.setHeight();
  },
  methods:{
    getArticles:function(rpage,rpageSize,rtag,rtitle,rauthor){
      this.$http.post('http://www.eblog.site/eblog/mgGetArticleByAuthor',
        {page:rpage,pageSize:rpageSize,tag:rtag,title:rtitle,author:rauthor}
        ,{emulateJSON: true}
      ).then(function (response) {
          let listLength = response.body.pageInfo.list.length;
          for(var i=0;i<listLength;i++){
            this.articles.push(response.body.pageInfo.list[i]);
          }
          //this.articles = response.body.pageInfo.list;
          this.maxPage = response.body.pageInfo.pages;
        },function (response) {
        }
      )
    },
    handleTopChange:function(status) {
      this.topStatus = status;
    },

    handleBottomChange:function(status) {
      this.bottomStatus = status;
    },
    loadTop:function(){
      // 加载更多数据
      window.location.reload();
      // this.page=0;
      // this.articles=[];
      // this.allLoaded=false;
      // this.getArticles(this.page,this.pageSize,this.tag,this.title,this.author);
      // this.$refs.loadmore.onBottomLoaded();
    },
    loadBottom:function(){
      if(this.page<this.maxPage){
        this.page++;
        this.getArticles(this.page,this.pageSize,this.tag,this.title,this.author);
        this.$refs.loadmore.onBottomLoaded();
        if(this.page==3){
          this.allLoaded=true;
        }
      }
    },
    setHeight:function(){
      let swipeBH = document.querySelector(".swipeBox").style.height;
      let winH = window.innerHeight;
      document.getElementById('app').style.height = window.innerHeight+'px'; 
      document.querySelector(".loadmore-wrapper").style.height=winH-parseInt(swipeBH)-80+'px';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loadmore-wrapper{
  overflow:scroll;
}
</style>
